<template>
	<div class="page-container">
		<a-page-header @back="handleClickBack" v-bind="$attrs" :title="title">
			<template v-if="slots.extra" #extra>
				<slot name="extra" />
			</template>
			<template v-if="slots.breadcrumb" #breadcrumb>
				<slot name="breadcrumb" />
			</template>
			<template v-if="slots.backIcon" #back-icon>
				<slot name="back-icon" />
			</template>
			<template v-if="slots.title" #title>
				<slot name="title" />
			</template>
			<template v-if="slots.subtitle" #subtitle>
				<slot name="subtitle" />
			</template>
		</a-page-header>
		<div class="page-content">
			<slot />
		</div>
	</div>
</template>


<script>
export default {
  name: 'PageContainer',
}
</script>

<script setup>
import { useSlots } from 'vue';
defineProps({
	title: String
});

const slots = useSlots();

const emits = defineEmits(['back']);

function handleClickBack() {
	emits('back');
}
</script>

<style lang="less" scoped>
:deep {
	.arco-page-header-title {
		font-size: 20px;
	}
}
.page-container {
	height: calc(100% - 64px);
	background: var(--color-bg-white);
}
.page-content {
	padding: 0 24px 8px 24px;
	height: 100%;
}
:deep(.arco-page-header-wrapper) {
	padding: 0 24px;
}
</style>
